<template>
	<view class="point-wrap" :data-theme="themeStyle">
		<mescroll-uni @getData="getData" ref="mescroll" :size="10" v-if="addonIsExit.pointexchange">
			<block slot="list">
				<view class="head-wrap color-base-bg">
					<image :src="$util.img('upload/uniapp/point/point_bg.png')" mode="widthFix"></image>
					<view class="wrap" :class="{ 'no-login': !token }">
						<view v-if="!token" @click="login">
							<view class="lineheight-clear"><text class="font-size-toolbar login-btn">立即登录</text></view>
							<view class="lineheight-clear"><text class="font-size-tag">登录后查看我的积分</text></view>
						</view>
						<view v-else class="member-wrap">
							<view class="headimg">
								<image
									:src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().default_headimg"
									mode="aspectFill"
									@error="memberInfo.headimg = $util.getDefaultImage().default_headimg"></image>
							</view>
							<text class="point">{{ point }}</text>
							<text class="point-name">积分</text>
							<view class="rule">
								<text class="iconfont iconwenhao"></text>
								<text class="font-size-tag" @click="openPointPopup()">兑换规则</text>
							</view>
						</view>
						<view class="action-wrap" v-if="token">
							<view @click="jumpPage('/otherpages/member/point/point')">
								积分明细
								<text class="iconfont iconright"></text>
							</view>
							<view class="split"></view>
							<view @click="jumpPage('/promotionpages/point/order_list/order_list')">
								兑换记录
								<text class="iconfont iconright"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="order-nav" v-if="token">
					<view v-for="(statusItem, statusIndex) in statusList" :key="statusIndex" class="uni-tab-item"
						:id="statusItem.id" :data-current="statusIndex" @click="ontabtap">
						<text class="uni-tab-item-title"
							:class="statusItem.id == statusId ? 'uni-tab-item-title-active color-base-border  color-base-text' : ''">
							{{ statusItem.name }}
						</text>
					</view>
				</view>
				<view class="body-wrap" :class="{ 'no-login': !token }">
					<view class="point-exchange-wrap" v-if="couponList.length > 0">
						<view class="type-wrap">
							<text class="type-name">积分换券</text>
							<view></view>
							<text class="type-sub">更多好券，帮你省钱</text>
						</view>

						<view class="list-wrap">
							<view class="list-wrap-scroll">
								<view class="list-wrap-item coupon-list-wrap-item"
									v-for="(couponItem, couponIndex) in couponList" :key="couponIndex"
									@click="toDetail(couponItem)">
									<view class="img-box">
										<image :src="$util.img('upload/uniapp/point/coupon_'+themeStyle+'_bg1.png')"
											@error="imageError(couponIndex)"></image>
									</view>
									<view class="content">
										<!-- <view class="coupon-price-wrap">
											<view class="coupon-price color-base-text">
												<text v-if="couponItem.coupon_type == 'reward'">￥</text>
												{{parseFloat(couponItem.market_price).toFixed(0)}}
												<text v-if="couponItem.coupon_type == 'discount'">折</text>
											</view>
											<view class="coupon-point">
												<view class="coupon-point-num">
													<image :src="$util.img('upload/uniapp/point/rechange.png')"></image>
													<text>{{couponItem.point}}积分兑换</text>
												</view>
												<view class="coupon-conditions">
													{{couponItem.at_least == 0 ? '无门槛优惠券' : '满'+ parseFloat(couponItem.at_least).toFixed(0) +'可用'}}
												</view>
											</view>
										</view>
										
										<view class="coupon-name">{{couponItem.name}}</view> -->
										<view class="coupon"
											:style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/point/coupon_'+themeStyle+'_bg1.png') + ')' }">
											<view class="coupon_left color-line-border">
												<view class="price color-base-text">
													<block v-if="couponItem.coupon_type == 'reward'">
														<text>￥</text>
														{{ parseFloat(couponItem.money) }}
													</block>
													<block v-if="couponItem.coupon_type == 'discount'">
														<block v-if="couponItem.coupon_type == 'discount'">
															{{ parseFloat(couponItem.discount) }}折
														</block>
													</block>
												</view>
												<view class="coupon_condition font-size-activity-tag color-base-text">
													{{ couponItem.at_least == 0 ? '无门槛优惠券' : '满' + parseFloat(couponItem.at_least).toFixed(0) + '可用' }}
												</view>
												<view class="coupon_type font-size-activity-tag color-base-text">
													{{ couponItem.goods_type == 2 ? '指定券' : '全场券' }}
												</view>
											</view>
											<view class="coupon_right">
												<view class="coupon_num color-base-text font-size-tag">
													{{ couponItem.point }}积分
												</view>
												<view class="coupon_btn color-base-text">兑换</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="point-exchange-wrap" v-if="hongbaoList.length > 0">
						<view class="type-wrap">
							<text class="type-name">积分换红包</text>
							<view></view>
							<text class="type-sub">红包在手，省钱有道</text>
						</view>

						<view class="list-wrap">
							<view class="list-wrap-item hongbao-list-wrap-item"
								v-for="(hongbaoItem, hongbaoIndex) in hongbaoList" :key="hongbaoIndex"
								@click="toDetail(hongbaoItem)">
								<view class="img-box">
									<image :src="$util.img('upload/uniapp/point/hongbao_bg.png')"></image>
								</view>
								<view class="content">
									<view class="coupon hongbao">
										<view class="coupon_left">
											<view class="price ">
												<text>￥</text>
												{{ parseFloat(hongbaoItem.balance).toFixed(0) }}
											</view>
											<view class="coupon_condition font-size-activity-tag">{{ hongbaoItem.name }}
											</view>
										</view>
										<view class="coupon_right">
											<view class="coupon_num  font-size-tag">{{ hongbaoItem.point }}积分</view>
											<view class="coupon_btn">兑换</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 通用 -->
					<view class="point-exchange-wrap" v-if="goodsList.length > 0 && statusId == 1">
						<view class="type-wrap-box">
							<view class="type-wrap">
								<text class="type-name">积分换好物</text>
								<view></view>
								<text class="type-sub">积累积分，兑换好物</text>
							</view>
							<text class="more" @click="goGoodsList()">更多</text>
						</view>

						<view class="list-wrap">
							<view class="goods-list double-column" v-if="goodsList.length">
								<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
									<view class="goods-img" @click="toDetail(item)">
										<image :src="goodsImg(item)" mode="widthFix" @error="imgError(index)"></image>
									</view>
									<view class="info-wrap">
										<view class="name-wrap">
											<view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
										</view>
										<view class="lineheight-clear" v-if="statusId !=3">
											<view class="discount-price">
												<text class="unit color-base-text">{{ item.point }}</text>
												<text class="unit color-base-text font-size-tag">积分</text>
												<block v-if="item.price > 0 && item.pay_type > 0">
													<text class="unit color-base-text font-size-tag">+</text>
													<text
														class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
													<text
														class="price color-base-text font-size-toolbar">{{ item.price }}</text>
												</block>
											</view>
										</view>
										<view class="lineheight-clear" v-if="statusId ==3">
											<view class="discount-price">
												<text class="unit color-base-text">{{ item.thousands }}</text>
												<text class="unit color-base-text font-size-tag">万豆</text>
											</view>
										</view>
										<view class="pro-info">
											<view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
											<view class="sale font-size-activity-tag color-tip" @click="toDetail(item)">
												<!-- <button type="primary" size="mini">立即兑换</button> -->
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="point-exchange-wrap" v-if="!goodsList.length && statusId == 1">
						<view class="cart-empty">
							<ns-empty :isIndex="!1" :fixed="false" text="暂无积分兑换商品"></ns-empty>
						</view>
					</view>
					<!-- 专属兑换区 -->
					<view class="point-exchange-wrap" v-if="statusId == 2">
						<view class="type-wrap-box">
							<view class="type-wrap">
								<text class="type-name">积分换好物</text>
								<view></view>
								<text class="type-sub">积累积分，兑换好物</text>
							</view>
							<!-- <text class="more" @click="goGoodsList()">更多</text> -->
						</view>
						<view class="" v-for="(li,ind) in zhuanGoodsList" :key="ind">
							<view class="card-content-head">
								<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png">
								</image>
								<view class="card-content-title">{{li.level_name}}兑换区</view>
								<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png">
								</image>
							</view>
							<view class="list-wrap" v-if="li.list.length">
								<view class="goods-list double-column">
									<view class="goods-item margin-bottom" v-for="(item, index) in li.list" :key="index">
										<view class="goods-img" @click="toDetail(item)">
											<image :src="goodsImg(item)" mode="widthFix" @error="imgError(index)">
											</image>
										</view>
										<view class="info-wrap">
											<view class="name-wrap">
												<view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
											</view>
											<view class="lineheight-clear">
												<view class="discount-price">
													<text class="unit color-base-text">{{ item.point }}</text>
													<text class="unit color-base-text font-size-tag">积分</text>
													<block v-if="item.price > 0 && item.pay_type > 0">
														<text class="unit color-base-text font-size-tag">+</text>
														<text
															class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
														<text
															class="price color-base-text font-size-toolbar">{{ item.price }}</text>
													</block>
												</view>
											</view>
											<view class="pro-info">
												<view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
												<view class="sale font-size-activity-tag color-tip"
													@click="toDetail(item)">
													<!-- <button type="primary" size="mini">立即兑换</button> -->
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="list-wrap" v-if="li.list.length == 0">
								<view class="cart-empty" style="padding-top: 0px !important;">
									<ns-empty :isIndex="!1" :fixed="false" :text="`暂无${li.level_name}兑换商品`"></ns-empty>
								</view>
							</view>
						</view>
					</view>
				</view>

			</block>
		</mescroll-uni>

		<!-- 弹出规则 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="pointPopup" type="bottom">
				<view class="tips-layer">
					<view class="head" @click="closePointPopup()">
						<view class="title">积分兑换说明</view>
						<text class="iconfont iconclose"></text>
					</view>
					<view class="body">
						<view class="detail margin-bottom">
							<!-- <view class="tip">积分的获取</view>
							<view class="font-size-base">1、积分可在注册、签到、分享、消费、充值时获得。</view>
							<view class="font-size-base">2、在购买部分商品时可获得积分。</view>
							<view class="tip">积分的使用</view>
							<view class="font-size-base">1、积分可用于兑换积分中心的商品。</view>
							<view class="font-size-base">2、积分可在参与某些活动时使用。</view>
							<view class="font-size-base">3、积分不得转让，出售，不设有效期。</view>
							<view class="tip">积分的查询</view>
							<view class="font-size-base">1、积分可在会员中心中查询具体数额以及明细。</view> -->
							<view class="tip">积分兑换：（一年有效期）</view>
							<view class="font-size-base">1、可用5万积分免费兑换品牌四件套。</view>
							<view class="font-size-base">2、可用10万各分免费兑换品牌电磁炉一台。</view>
							<view class="font-size-base">3、可以15万积分免费兑换华为无线充电器一台。</view>
							<view class="font-size-base">4、可用20万积分免费兑换品牌挂烫机一台。</view>
							<view class="font-size-base">5、可用25万积分免费兑换品牌电烤箱一台。</view>
							<view class="font-size-base">6、可用30万各分免费兑换品牌空气净化器一台。</view>
							<view class="font-size-base">7、可用40万积分免费兑换品牌洗衣机一台。</view>
							<view class="font-size-base">8、可用50万积分免费兑换华为手机一部。</view>
							<view class="font-size-base">9、可用60万积分免费兑换华为笔记本一台。</view>
							<view class="tip">积分兑换：产品</view>
							<view class="font-size-base">1、50000积分兑换国际专著或电子专著编委一个。</view>
							<view class="font-size-base">2、60000积分兑换国际中文刊（万方）一篇。</view>
							<view class="font-size-base">3、60000积分兑换国际中文刊（万方）一篇。</view>
							<view class="font-size-base">4、80000积分兑换国际专著目录中主编一位。</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
	</view>
</template>
<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				mescroll: null,
				categoryList: [{
						id: 1,
						name: '积分换好物'
					},
					{
						id: 2,
						name: '积分换券'
					},
					{
						id: 3,
						name: '积分换红包'
					}
				],
				statusList: [{
						id: 1,
						name: '通用兑换区'
					},
					{
						id: 2,
						name: '专属兑换区'
					},
				],
				statusId: 2,
				isLogin: false,
				goodsList: [],
				zhuanGoodsList: [],
				couponList: [],
				hongbaoList: [],
				point: 0,
				token: null,
				memberInfo: {
					headimg: ''
				},
				signState: 1, // 签到是否开启
				//分享建立上下级所需id
				memberId: 0,
				mpShareData: null, //小程序分享数据
			};
		},
		mixins: [globalConfig],
		onLoad(option) {
			//获取memberId
			this.$util.getMemberId().then(resolve => {
				this.memberId = resolve;
			}).catch((reject) => {
				// #ifdef MP-WEIXIN
				console.log('reject', reject)
				// #endif
			})
			//小程序分享接收source_member
			if (option.source_member) {
				uni.setStorageSync('source_member', option.source_member);
			}
			// 小程序扫码进入，接收source_member
			if (option.scene) {
				var sceneParams = decodeURIComponent(option.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
						if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
						if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
					});
				}
			}
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();

			if (!this.addonIsExit.pointexchange) {
				this.$util.showToast({
					title: '商家未开启积分商城',
					mask: true,
					duration: 2000
				});
				setTimeout(() => {
					this.$util.redirectTo('/pages/index/index/index', {}, 'redirectTo');
				}, 2000);
				return;
			}

			//记录分享关系
			if (uni.getStorageSync('token') && uni.getStorageSync('source_member')) {
				this.$util.onSourceMember(uni.getStorageSync('source_member'));
			}

			//小程序分享
			// #ifdef MP-WEIXIN
			this.$util.getMpShare().then((res) => {
				this.mpShareData = res;
			});
			// #endif

			if (uni.getStorageSync('token')) this.getMemberInfo();
			if(this.statusId == 1){
				this.getCouponList();
				this.getHongbaoList();
			}
			
			this.getSignState();
		},
		computed: {
			storeToken() {
				return this.$store.state.token;
			}
		},
		watch: {
			storeToken: function(nVal, oVal) {
				if (nVal) {
					this.getMemberInfo();
				}
			}
		},
		methods: {
			// 切换tab
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.statusId = this.statusList[index].id;
				if(this.statusId == 1){
					this.getCouponList();
					this.getHongbaoList();
				}
				this.mescroll.num = 1
				this.getData(this.mescroll)
			},
			// 签到是否开启
			getSignState() {
				this.$api.sendRequest({
					url: '/api/membersignin/getSignStatus',
					success: res => {
						if (res.code == 0) {
							this.signState = res.data.is_use;
						}
					}
				});
			},
			jumpPage(url) {
				this.$util.redirectTo(url);
			},
			// 打开积分说明弹出层
			openPointPopup() {
				this.$refs.pointPopup.open();
			},
			// 打开积分说明弹出层
			closePointPopup() {
				this.$refs.pointPopup.close();
			},
			// 优惠券
			getCouponList() {
				this.$api.sendRequest({
					url: '/pointexchange/api/goods/page',
					data: {
						type_status: this.statusId,
						page_size: 0,
						type: 2
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.couponList = res.data.list;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail() {
						//联网失败的回调
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			// 红包
			getHongbaoList() {
				this.$api.sendRequest({
					url: '/pointexchange/api/goods/page',
					data: {
						page_size: 0,
						type: 3,
						type_status: this.statusId,
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.hongbaoList = res.data.list;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail() {
						//联网失败的回调
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//获取积分商品详情
			getData(mescroll) {
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/pointexchange/api/goods/page',
					data: {
						page_size: mescroll.size,
						page: mescroll.num,
						type: 1,
						type_status: this.statusId,
					},
					success: res => {
						if (this.statusId == 1) {
							let newArr = [];
							let msg = res.message;
							if (res.code == 0 && res.data) {
								newArr = res.data.list;
							} else {
								this.$util.showToast({
									title: msg
								});
							}
							mescroll.endSuccess(newArr.length);
							//设置列表数据

							if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
							this.goodsList = this.goodsList.concat(newArr); //追加新数据
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						} else {
							this.zhuanGoodsList = res.data;
							console.log(this.zhuanGoodsList);
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail() {
						//联网失败的回调
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//跳转至详情页面
			toDetail(item) {
				console.log(item);
				this.$util.redirectTo('/promotionpages/point/detail/detail', {
					level: this.statusId == 2 ? item.level : '',
					id: item.id,
					type: this.statusId
				});
			},
			goGoodsList() {
				this.$util.redirectTo('/promotionpages/point/list/goods_list?type_status=' + this.statusId);
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code >= 0) {
							this.token = uni.getStorageSync('token');
							this.memberInfo = res.data;
							this.getAccountInfo();
						} else {
							this.token = null;
						}
					}
				});
			},
			//获取个人
			getAccountInfo() {
				this.$api.sendRequest({
					url: '/api/memberaccount/info',
					data: {
						account_type: 'point'
					},
					success: res => {
						if (res.code == 0 && res.data) {
							if (!isNaN(parseFloat(res.data.point))) {
								this.point = parseFloat(res.data.point).toFixed(0);
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			//跳转至登录页面
			login() {
				this.$refs.login.open('/promotionpages/point/list/list');
			},
			imgError(index) {
				this.goodsList[index].image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			},
			goodsImg(data) {
				switch (data.type) {
					case 1:
						return this.$util.img(data.image.split(',')[0], {
							size: 'mid'
						});
						break;
					case 2:
						return data.image ? this.$util.img(data.image) : this.$util.img('upload/uniapp/point/coupon.png');
						break;
					case 3:
						return data.image ? this.$util.img(data.image) : this.$util.img('upload/uniapp/point/hongbao.png');
						break;
				}
			}
		},
		//分享给好友
		onShareAppMessage() {
			return this.mpShareData.appMessage;
		},
		//分享到朋友圈
		onShareTimeline() {
			return this.mpShareData.timeLine;
		},
	};
</script>

<style lang="scss">
	@import '../public/css/list.scss';
</style>
<style scoped>
	/deep/ .reward-popup .uni-popup__wrapper-box {
		background: none !important;
		max-width: unset !important;
		max-height: unset !important;
	}

	.tip {
		font-weight: bold;
	}

	.font-size-base {
		font-size: 24rpx;
		text-indent: 16rpx;
	}
</style>